<template>
  <div class="page-header-index-wide">
    <div class="boxs"></div>
    <a-button @click="ccc">1111</a-button>
    <div v-html="htmlva"></div>
    <a-row :gutter="24">
      <a-col span="6">
        <div class="font_color"> 现在是： {{ startTime }} </div>
      </a-col>
      <a-col span="6">
        <div> 已停留： {{ endTime }} </div>
      </a-col>
      <a-col span="6">
        <div> {{ startCountDown }} 分钟 倒计时： {{ endCountDown }} </div>
      </a-col>
      <a-col span="6">
        <div> 距离 {{ startCountDownTime }} 还有： {{ endCountDownTime }} </div>
      </a-col>
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <chart-card
          :loading="loading"
          title="总销售额"
          total="￥126,560"
        >
          <a-tooltip
            title="指标说明"
            slot="action"
          >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend
              flag="up"
              style="margin-right: 16px;"
            >
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">日同比</span>
              11%
            </trend>
          </div>
          <template slot="footer">日均销售额<span>￥ 234.56</span></template>
        </chart-card>
      </a-col>
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <chart-card
          :loading="loading"
          title="访问量"
          :total="8846 | NumberFormat"
        >
          <a-tooltip
            title="指标说明"
            slot="action"
          >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <chart-card
          :loading="loading"
          title="支付笔数"
          :total="6560 | NumberFormat"
        >
          <a-tooltip
            title="指标说明"
            slot="action"
          >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <template slot="footer">转化率 <span>60%</span></template>
        </chart-card>
      </a-col>
      <a-col
        :sm="24"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <chart-card
          :loading="loading"
          title="运营活动效果"
          total="78%"
        >
          <a-tooltip
            title="指标说明"
            slot="action"
          >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress
              color="rgb(19, 194, 194)"
              :target="80"
              :percentage="78"
              height="8px"
            />
          </div>
          <template slot="footer">
            <trend
              flag="down"
              style="margin-right: 16px;"
            >
              <span slot="term">同周比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">日环比</span>
              80%
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card
      :loading="loading"
      :bordered="false"
      :body-style="{padding: '0'}"
    >
      <div class="salesCard">
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
        >
          <div
            class="extra-wrapper"
            slot="tabBarExtraContent"
          >
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>
          <a-tab-pane
            loading="true"
            tab="销售额"
            key="1"
          >
            <a-row>
              <a-col
                :xl="16"
                :lg="12"
                :md="12"
                :sm="24"
                :xs="24"
              >
                <bar
                  :data="barData"
                  title="销售额排行"
                />
              </a-col>
              <a-col
                :xl="8"
                :lg="12"
                :md="12"
                :sm="24"
                :xs="24"
              >
                <rank-list
                  title="门店销售排行榜"
                  :list="rankList"
                />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane
            tab="访问量"
            key="2"
          >
            <a-row>
              <a-col
                :xl="16"
                :lg="12"
                :md="12"
                :sm="24"
                :xs="24"
              >
                <bar
                  :data="barData2"
                  title="销售额趋势"
                />
              </a-col>
              <a-col
                :xl="8"
                :lg="12"
                :md="12"
                :sm="24"
                :xs="24"
              >
                <rank-list
                  title="门店销售排行榜"
                  :list="rankList"
                />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <div
      class="antd-pro-pages-dashboard-analysis-twoColLayout"
      :class="isDesktop() ? 'desktop' : ''"
    >
      <a-row
        :gutter="24"
        type="flex"
        :style="{ marginTop: '24px' }"
      >
        <a-col
          :xl="12"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24"
        >
          <a-card
            :loading="loading"
            :bordered="false"
            title="线上热门搜索"
            :style="{ height: '100%' }"
          >
            <a-dropdown
              :trigger="['click']"
              placement="bottomLeft"
              slot="extra"
            >
              <a
                class="ant-dropdown-link"
                href="#"
              >
                <a-icon type="ellipsis" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">操作一</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">操作二</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <a-row :gutter="68">
              <a-col
                :xs="24"
                :sm="12"
                :style="{ marginBottom: ' 24px'}"
              >
                <number-info
                  :total="12321"
                  :sub-total="17.1"
                >
                  <span slot="subtitle">
                    <span>搜索用户数</span>
                    <a-tooltip
                      title="指标说明"
                      slot="action"
                    >
                      <a-icon
                        type="info-circle-o"
                        :style="{ marginLeft: '8px' }"
                      />
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area
                    :style="{ height: '45px' }"
                    :dataSource="searchUserData"
                    :scale="searchUserScale"
                  />
                </div>
              </a-col>
              <a-col
                :xs="24"
                :sm="12"
                :style="{ marginBottom: ' 24px'}"
              >
                <number-info
                  :total="2.7"
                  :sub-total="26.2"
                  status="down"
                >
                  <span slot="subtitle">
                    <span>人均搜索次数</span>
                    <a-tooltip
                      title="指标说明"
                      slot="action"
                    >
                      <a-icon
                        type="info-circle-o"
                        :style="{ marginLeft: '8px' }"
                      />
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area
                    :style="{ height: '45px' }"
                    :dataSource="searchUserData"
                    :scale="searchUserScale"
                  />
                </div>
              </a-col>
            </a-row>
            <div class="ant-table-wrapper">
              <a-table
                row-key="index"
                size="small"
                :columns="searchTableColumns"
                :dataSource="searchData"
                :pagination="{ pageSize: 5 }"
              >
                <span
                  slot="range"
                  slot-scope="text, record"
                >
                  <trend :flag="record.status === 0 ? 'up' : 'down'">
                    {{ text }}%
                  </trend>
                </span>
              </a-table>
            </div>
          </a-card>
        </a-col>
        <a-col
          :xl="12"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24"
        >
          <a-card
            class="antd-pro-pages-dashboard-analysis-salesCard"
            :loading="loading"
            :bordered="false"
            title="销售额类别占比"
            :style="{ height: '100%' }"
          >
            <div
              slot="extra"
              style="height: inherit;"
            >
              <!-- style="bottom: 12px;display: inline-block;" -->
              <span class="dashboard-analysis-iconGroup">
                <a-dropdown
                  :trigger="['click']"
                  placement="bottomLeft"
                >
                  <a-icon
                    type="ellipsis"
                    class="ant-dropdown-link"
                  />
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;">操作一</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;">操作二</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>
              <div class="analysis-salesTypeRadio">
                <a-radio-group defaultValue="a">
                  <a-radio-button value="a">全部渠道</a-radio-button>
                  <a-radio-button value="b">线上</a-radio-button>
                  <a-radio-button value="c">门店</a-radio-button>
                </a-radio-group>
              </div>

            </div>
            <h4>销售额</h4>
            <div>
              <!-- style="width: calc(100% - 240px);" -->
              <div>
                <v-chart
                  :force-fit="true"
                  :height="405"
                  :data="pieData"
                  :scale="pieScale"
                >
                  <v-tooltip
                    :showTitle="false"
                    dataKey="item*percent"
                  />
                  <v-axis />
                  <!-- position="right" :offsetX="-140" -->
                  <v-legend dataKey="item" />
                  <v-pie
                    position="percent"
                    color="item"
                    :vStyle="pieStyle"
                  />
                  <v-coord
                    type="theta"
                    :radius="0.75"
                    :innerRadius="0.6"
                  />
                </v-chart>
              </div>

            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'

const barData = []
const barData2 = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }]

const searchTableColumns = [
  {
    dataIndex: 'index',
    title: '排名',
    width: 90
  },
  {
    dataIndex: 'keyword',
    title: '搜索关键词'
  },
  {
    dataIndex: 'count',
    title: '用户数'
  },
  {
    dataIndex: 'range',
    title: '周涨幅',
    align: 'right',
    sorter: (a, b) => a.range - b.range,
    scopedSlots: { customRender: 'range' }
  }
]
const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = [
  { item: '家用电器', count: 32.2 },
  { item: '食用酒水', count: 21 },
  { item: '个护健康', count: 17 },
  { item: '服饰箱包', count: 13 },
  { item: '母婴产品', count: 9 },
  { item: '其他', count: 7.8 }
]

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      loading: true,
      rankList,
      htmlva: '',
      li: [],
      img: '',
      ul: '',
      uuu: [],
      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchTableColumns,
      searchData,

      barData,
      barData2,

      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      startTime: '',
      endTime: '',
      enddata: {
        seconds: 0,
        minutes: 0,
        hours: 0,
        day: 0
      },
      setInterval: null,
      startCountDown: 1,
      endCountDown: '',
      endCountDownAll: {
        seconds: 60,
        minutes: 0,
        hours: 0
      },
      setIntervalOne: null,
      startCountDownTime: '2021-11-12 10:42',
      endCountDownTime: '',
      setIntervalTwo: null
    }
  },
  created () {
    console.log(this.$route.query.id, 'this.$route.query.id')
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.startTime = this.startDate()
    this.endTime = this.endDate()
    this.endCountDown = this.endCountDownDate()
    this.endCountDownTime = this.endCountDownTimeDate()
    this.setInterval = setInterval(() => {
      this.startTime = this.startDate()
      this.endTime = this.endDate()
    }, 1000)
    this.setIntervalOne = setInterval(() => {
      this.endCountDown = this.endCountDownDate()
    }, 1000)
    this.setIntervalTwo = setInterval(() => {
      this.endCountDownTime = this.endCountDownTimeDate()
    }, 1000)
  },
  mounted () {
    this.renData()
  },
  methods: {
    ccc () {
      window.open('http://localhost:8000/dashboard/analysis?id=222', '_blank')
    },
    startDate () {
      const date = new Date()
      const week = this.getWeek(date)
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let day = date.getDate()
      day = day < 10 ? '0' + day : day
      let hours = date.getHours()
      hours = hours < 10 ? '0' + hours : hours
      let minutes = date.getMinutes()
      minutes = minutes < 10 ? '0' + minutes : minutes
      let seconds = date.getSeconds()
      seconds = seconds < 10 ? '0' + seconds : seconds
      return (
        year + ' 年 ' + month + ' 月 ' + day + ' 日 ' + hours + ':' + minutes + ':' + seconds + '\xa0\xa0\xa0\xa0\xa0\xa0' + week
      )
    },
    getWeek (d) {
      const weekday = new Array(7)
      weekday[0] = '星期日'
      weekday[1] = '星期一'
      weekday[2] = '星期二'
      weekday[3] = '星期三'
      weekday[4] = '星期四'
      weekday[5] = '星期五'
      weekday[6] = '星期六'
      return weekday[d.getDay()]
    },
    endDate () {
      this.enddata.seconds++
      if (this.enddata.seconds === 60) {
        this.enddata.seconds = 0
        if (this.enddata.minutes === 60) {
          if (this.enddata.hour === 24) {
            this.enddata.day++
          } else {
            this.enddata.hours++
          }
        } else {
          this.enddata.minutes++
        }
      }
      const seconds = this.enddata.seconds < 10 ? '0' + this.enddata.seconds : this.enddata.seconds
      const minutes = this.enddata.minutes < 10 ? '0' + this.enddata.minutes : this.enddata.minutes
      const hours = this.enddata.hours < 10 ? '0' + this.enddata.hours : this.enddata.hours
      const day = this.enddata.day ? this.enddata.day + '天' : ''
      return (
        day + '\xa0\xa0' + hours + ':' + minutes + ':' + seconds
      )
    },
    endCountDownDate () {
      if (this.startCountDown === 1) {
        this.endCountDownAll.minutes = 0
      }
      this.endCountDownAll.seconds--
      if (this.endCountDownAll.seconds === 0) {
        this.endCountDownAll.seconds = 60
        if (this.endCountDownAll.minutes === 0) {
          if (this.endCountDownAll.hours === 0) {
            clearInterval(this.setIntervalOne)
            return `${this.startCountDown}分钟时间已到！`
          } else {
            this.endCountDownAll.hours--
          }
        } else {
          this.endCountDownAll.minutes--
        }
      }
      const seconds = this.endCountDownAll.seconds < 10 ? '0' + this.endCountDownAll.seconds : this.endCountDownAll.seconds
      const minutes = this.endCountDownAll.minutes < 10 ? '0' + this.endCountDownAll.minutes : this.endCountDownAll.minutes
      const hours = this.endCountDownAll.hours < 10 ? '0' + this.endCountDownAll.hours : this.endCountDownAll.hours
      return (
        hours + ':' + minutes + ':' + seconds
      )
    },
    endCountDownTimeDate () {
      const date = new Date()
      const inte = +new Date(this.startCountDownTime)
      if (date > inte) {
        clearInterval(this.setIntervalTwo)
        return '已过期！'
      }
      const tims = (inte - date) / 1000
      let day = Math.floor(tims / 60 / 60 / 24)
      day = day < 10 ? '0' + day : day
      let hours = Math.floor((tims / 60 / 60) % 24)
      hours = hours < 10 ? '0' + hours : hours
      let minutesm = Math.floor((tims / 60) % 60)
      minutesm = minutesm < 10 ? '0' + minutesm : minutesm
      let seconds = Math.floor(tims % 60)
      seconds = seconds < 10 ? '0' + seconds : seconds
      return (
        day + '天' + hours + '时' + minutesm + '分' + seconds + '秒'
      )
    },
    renData () {
      const num = 250 / 10
      const htmlVal = []
      let img = ''
      let htmlValBox = []
      let imgBox = []
      if (num <= 5) {
        for (let y = 0; y < num; y++) {
          img = `<div class="alone_img"></div>`
          htmlVal.push(img)
        }
      } else {
        for (let y = 0; y < num; y++) {
          if (y % 5 === 0 && y !== 0) {
            htmlValBox = `<div class="alone-icon-box" style="top:${(y - 5) * 3}px">${imgBox.join('')}</div>`
            imgBox = []
            htmlVal.push(htmlValBox)
          }
          img = `<div class="alone_img"></div>`
          imgBox.push(img)
          if (y === num - 1) {
            htmlValBox = `<div class="alone-icon-box" style="top:${(Math.ceil(num / 5) * 5 - 5) * 3}px">${imgBox.join('')}</div>`
            imgBox = []
            htmlVal.push(htmlValBox)
          }
        }
      }
      const htmlAll = htmlVal.join('')
      this.htmlva = `
                <div class="alone-icon" style="height:${(Math.ceil(num / 5)) * 18}px"> ${htmlAll} </div>
                `
    }
  },
  destroyed () {
    clearInterval(this.setInterval, this.setIntervalTwo)
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
/deep/ .alone-icon {
  max-width: 100px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  .alone-icon-box {
    display: flex;
    position: absolute;
  }
  .alone-icon-box:nth-child(2n) {
    right: 5px;
  }
  .alone_img {
    width: 14px;
    height: 30px;
    background: url('../../assets/people.png') no-repeat;
    background-size: 100% 100%;
    margin-left: 3px;
  }
}
.font_color {
  background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
